<template>
  <div ref="container" style="width: 100%; height: 600px"> </div>
</template>

<script>
  import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
  import { UniverSheetsConditionalFormattingPreset } from '@univerjs/presets/preset-sheets-conditional-formatting';
  import sheetsConditionalFormattingZhCN from '@univerjs/presets/preset-sheets-conditional-formatting/locales/zh-CN';
  import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
  import sheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
  import { UniverSheetsDataValidationPreset } from '@univerjs/presets/preset-sheets-data-validation';
  import sheetsDataValidationZhCN from '@univerjs/presets/preset-sheets-data-validation/locales/zh-CN';
  import { UniverSheetsDrawingPreset } from '@univerjs/presets/preset-sheets-drawing';
  import sheetsDrawingZhCN from '@univerjs/presets/preset-sheets-drawing/locales/zh-CN';
  import { UniverSheetsFilterPreset } from '@univerjs/presets/preset-sheets-filter';
  import sheetsFilterZhCN from '@univerjs/presets/preset-sheets-filter/locales/zh-CN';
  import { UniverSheetsHyperLinkPreset } from '@univerjs/presets/preset-sheets-hyper-link';
  import sheetsHyperLinkZhCN from '@univerjs/presets/preset-sheets-hyper-link/locales/zh-CN';

  import '@univerjs/presets/lib/styles/preset-sheets-core.css';
  import '@univerjs/presets/lib/styles/preset-sheets-conditional-formatting.css';
  import '@univerjs/presets/lib/styles/preset-sheets-data-validation.css';
  import '@univerjs/presets/lib/styles/preset-sheets-drawing.css';
  import '@univerjs/presets/lib/styles/preset-sheets-filter.css';
  import '@univerjs/presets/lib/styles/preset-sheets-hyper-link.css';

  import { WORKBOOK_DATA } from './data';

  import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight';
  import SheetsCrosshairHighlightZhCN from '@univerjs/sheets-crosshair-highlight/locale/zh-CN';
  import '@univerjs/sheets-crosshair-highlight/lib/index.css';
  import '@univerjs/sheets-crosshair-highlight/facade';

  console.log('Basic: https://docs.univer.ai/zh-CN/playground/sheets/basic');

  export default {
    data() {
      return {
        univerAPI: null,
      };
    },
    mounted() {
      console.log('mounted basic');
      const { univerAPI } = createUniver({
        locale: LocaleType.ZH_CN,
        locales: {
          [LocaleType.ZH_CN]: merge(
            {},
            sheetsCoreZhCN,
            sheetsConditionalFormattingZhCN,
            sheetsDataValidationZhCN,
            sheetsDrawingZhCN,
            sheetsFilterZhCN,
            sheetsHyperLinkZhCN,
            //
            SheetsCrosshairHighlightZhCN
          ),
        },
        theme: defaultTheme,
        presets: [
          UniverSheetsCorePreset({
            container: this.$refs.container,
          }),
          UniverSheetsConditionalFormattingPreset(),
          UniverSheetsDataValidationPreset(),
          UniverSheetsDrawingPreset(),
          UniverSheetsFilterPreset(),
          UniverSheetsHyperLinkPreset(),
        ],
        plugins: [UniverSheetsCrosshairHighlightPlugin],
      });

      univerAPI.createWorkbook(WORKBOOK_DATA);
      //univerAPI.createWorkbook({ name: 'Test Sheet' });
      this.univerAPI = univerAPI;
    },

    beforeDestroy() {
      this.univerAPI.dispose();
      this.univerAPI = null;
    },
  };
</script>
